<template>
<view class="all">
   <swiper autoplay="true" circular="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#e51f54" interval="5000" duration="1000" :indicator-dots="banshow">
      <swiper-item v-for="(item, index) in shopsList.album" :key="index">
         <!-- <swiper-item wx:for="{{banlist}}" wx:key="integral_id"> -->
         <image :src="item.img_thumb" class="swiper-img" :data-index="index" @tap.stop="lookPic"></image>
      </swiper-item>
   </swiper>
   <view class="namess" v-if="isShow == 1">
      <view v-if="isShow == 1" class="time_tt">
         <view v-if="isOver" class="time">
            <view>距活动结束</view>
            <view class="endTime">
               <view v-if="overTime[0] != 0">{{overTime[0]}}天</view>
               <view>{{overTime[1]}}</view>:
               <view>{{overTime[2]}}</view>:
               <view>{{overTime[3]}}</view>
            </view>
         </view>
         <view v-if="!isOver" class="time">
            <view>活动已结束</view>
         </view>
      </view>
   </view>

   <!-- 内容 -->
   <view class="content_one">
      <view class="name">{{shopsList.goods.name}}</view>
      <view class="bottom">
         <view class="bottom_heng">
            <view class="heng">
               <view class="money kuan">最低: 
                  <text>￥{{shopsList.goods.target_price}}</text>
               </view>
               <view class="yuanjia">原价: {{shopsList.goods.price}}</view>
            </view>
            <view class="heng">
               <view class="kucun kuan">库存: {{shopsList.goods.goods_number}}</view>
               <view>已有{{shopsList.goods.all_cut_count}}人参与砍价</view>
            </view>
         </view>
         <!-- <view class='fenxiang' bindtap='fenxiang'>
            <image class='fxtp' src='../../img/share_icon.png'></image>
            <view>分享</view>
         </view> -->
         <tui-bottom-popup :show="fxshow" class="popup" position="bottom" overlay="true">
            <view class="shop">
               <view class="shop-p" @tap="yesshowFun">
                  <view class="scsphb">
                     <image src="/static/remao_shop/img/share_icon.png"></image>
                  </view>
                  <view>生成商品海报</view>
               </view>
            </view>
            <button hover-class="none" class="button" @tap="nofxshow">关闭</button>
         </tui-bottom-popup>
         <view class="cont-con" v-if="yesshow">
            <view class="cont-bai">
               <view class="cguanbi">
                  <image class="guanbi" src="/static/remao_shop/img/tuichu.png" @tap="noyesshow"></image>
               </view>
               <view class="content">
                  <image :src="shopsList.album[0].img_thumb"></image>
                  <view>{{shopsList.goods.name}}</view>
               </view>
               <button class="bac" @tap="baoctp">保存图片</button>
               <view class="baocz">保存至相册</view>
            </view>
         </view>
      </view>
   </view>
   <view v-if="isShow == 2 || isShow == 3" class="content_two">
      <view class="top">
         <image :src="jiluList.record[0].user.avatar"></image>
         <view>
            <view v-if="isOver" class="time">
               <view>距本次砍价结束仅剩</view>
               <view class="endTime">
                  <view v-if="overTime[0] != 0">{{overTime[0]}}天</view>
                  <view>{{overTime[1]}}</view>:
                  <view>{{overTime[2]}}</view>:
                  <view>{{overTime[3]}}</view>
               </view>
            </view>
            <view v-if="!isOver" class="time">
               <view>活动已结束</view>
            </view>
            <view class="times">快让你的好友助你一臂之力！</view>
         </view>
      </view>
      <view class="bottom">
         <view>当前价￥{{jiluList.surplus_price}}</view>
         <progress :percent="jindu" border-radius="40rpx" activeColor="#FE9F9F" stroke-width="15"></progress>
         <view class="bottom-bo">
            <view>原价￥{{shopsList.goods.price}}</view>
            <view> 底价￥{{shopsList.goods.target_price}}</view>
         </view>
         <view v-for="(item, index) in jiluList.record" :key="index" class="bottom-a">
            <image :src="item.user.avatar"></image>
            <view>{{item.user.nickname}}小刀一挥帮忙砍了
               <text>{{item.price}}</text>元</view>
         </view>
      </view>
   </view>
   <view class="content_three">
      <view class="title">
         <image src="/static/remao_shop/img/flow.png"></image>
         <view>砍价流程</view>
      </view>
      <view class="contaa">
         <view class="contaa_ab">
            <image class="quan" src="/static/remao_shop/img/bar-click.png"></image>
            点击砍价
         </view>
         <view class="contaa_a">
            <image src="/static/remao_shop/img/bar-down.png"></image>
         </view>
         <view class="contaa_ab">
            <image class="quan" src="/static/remao_shop/img/bar-som.png"></image>
            找人砍价
         </view>
         <view class="contaa_a">
            <image src="/static/remao_shop/img/bar-down.png"></image>
         </view>
         <view class="contaa_ab">
            <image class="quan" src="/static/remao_shop/img/bar-price.png"></image>
            价格合适
         </view>
         <view class="contaa_a">
            <image src="/static/remao_shop/img/bar-down.png"></image>
         </view>
         <view class="contaa_ab">
            <image class="quan" src="/static/remao_shop/img/bar-buy.png"></image>
            优惠购买
         </view>
      </view>

   </view>
   <view class="content_four">
      <view class="title">
         <image src="/static/remao_shop/img/state.png"></image>
         <view>活动说明</view>
      </view>
      <view class="cont">
         <view>
            <view class="hei"></view>本次活动开始时间 {{start_time}}
         </view>
         <view>
            <view class="hei"></view>本次活动结束时间 {{end_time}}
         </view>
      </view>
   </view>
   <view class="content_five">
      <view class="title">
         <image src="/static/remao_shop/img/details.png"></image>
         <view>商品详情</view>
      </view>
      <rich-text class="contss" :nodes="shopsList.goods.desc"></rich-text>
   </view>
   <view class="bai"></view>
   <view class="bottoms">
      <!-- <button hover-class="none" style='background-color:#e51f54' bindtap='liji'>立即购买</button> -->
      <button hover-class="none" style="background-color:#EE827F" v-if="isShow == 1" @tap="zhaoren">立即砍价</button>
      <button hover-class="none" style="background-color:#FFB95C" v-if="isShow == 2" @tap="zhaoren">找人帮砍</button>
      <button hover-class="none" style="background-color:#EE827F" v-if="isShow == 3" @tap="chenggong">砍价成功 立即付款</button>
   </view>
</view>
</template>

<script>
// hotmall/packageC/bargainirg/bargainirg.js
import api from "../../../api";
var app = getApp();
var countTime;
import tuiBottomPopup from '../../component/tui-bottom-popup/tui-bottom-popup.vue'
export default {
  data() {
    return {
      shopsList: [],
      id: '',
      uid: '',
      //判断是否参加活动
      isShow: 1,
      jiluList: [],
      // 倒计时数组
      overTime: [],
      // 判断活动是否结束
      isOver: true,
      start_time: '',
      end_time: '',
      //判断分享标签
      fxshow: false,
      yesshow: false,
      access_token: '',
      banshow: false,
      //进度条
      jindu: 0,
      //砍了多少钱
      cut_prices: '',
      //能砍多少原价减底价
      chajia: ''
    };
  },

  components: {
	  tuiBottomPopup
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    console.log(e);
    this.setData({
      id: e.id
    });
    wx.getStorage({
      key: 'userId',
      success: res => {
        console.log(res);
        this.setData({
          uid: res.data
        });
        this.getList();
        this.kanList();
      }
    }); // this.accesstoken()
  },
  // //获取access_token
  // accesstoken() {
  //    var that = this;
  //    wx.request({
  //       url: "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxbf2d347d3f324788&secret=3f7112d1948b00ab7a1a3ec18291cf24",
  //       data: {
  //       },
  //       header: {
  //          'content-type': 'application/x-www-form-urlencoded'
  //       },
  //       method: 'GET',
  //       dataType: 'json',
  //       success: function (res) {
  //          console.log(res)
  //          let qrcodeUrl = res.data;//服务器小程序码地址
  //          console.log(qrcodeUrl.access_token)
  //          that.setData({
  //            access_token:qrcodeUrl.access_token
  //          })
  //       },
  //       fail: function () { },
  //       // complete: options.complete || function () { }
  //    })
  // },
  // //获取小程序码
  // getQrcode() {
  //    var ACCESS_TOKEN = this.data.access_token
  //    wx.request({
  //       url: "https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token",
  //       data: {
  //          page: "pages/index",
  //          scene: "1234&123",
  //          width: 300
  //       },
  //       header: {
  //          'content-type': 'application/x-www-form-urlencoded'
  //       },
  //       method: 'POST',
  //       dataType: 'json',
  //       success: function (res) {
  //          console.log(res)
  //          let qrcodeUrl = res.data;//服务器小程序码地址
  //       },
  //       fail: function () { },
  //       // complete: options.complete || function () { }
  //    })
  // },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.getStorage({
      key: 'userId',
      success: res => {
        console.log(res);
        this.setData({
          uid: res.data
        });
        this.getList();
        this.kanList();
      }
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.getList();
    this.kanList();
    this.zongjia();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getList: function () {
      var that = this;
      app.globalData.request({
        // url: 'https://hotmall.shiliucrm.com/api/bargain/goods_detail',
        url: api.default.bargainirgdetail,
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

        },
        data: {
          uid: this.uid,
          id: this.id
        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            shopsList: res,
            chajia: res.goods.price - res.goods.target_price
          });
          console.log(this.chajia);

          if (res.album.length > 1) {
            this.setData({
              banshow: true
            });
          }

          console.log(res.cut_success);
          var timestamp3 = res.goods.start_time;
          var timestamp4 = res.goods.end_time;
          var newDate = new Date();
          var newDates = new Date();
          console.log(newDate);
          newDate.setTime(timestamp3 * 1000);
          newDates.setTime(timestamp4 * 1000);
          console.log(newDate.toLocaleString());
          this.setData({
            start_time: newDate.toLocaleString(),
            end_time: newDates.toLocaleString()
          });
        }
      }), this.zongjia(); // 计时器

      countTime = setInterval(that.countDown, 1000);
    },
    //总价
    zongjia: function () {
      console.log(this.cut_prices, this.chajia, 'ada ');
      var that = this;
      setTimeout(function () {
        that.setData({
          jindu: that.cut_prices / that.chajia * 100
        });
      }, 1000);
      console.log(this.jindu);
    },

    // 倒计时
    countDown() {
      let endTime = parseInt(this.shopsList.goods.end_time);
      let nowTime = parseInt(new Date().getTime() / 1000); //console.log(nowTime, endTime)

      let time = endTime - nowTime;
      var day = parseInt(time / 60 / 60 / 24); //console.log(day)

      var hour = parseInt(time / 60 / 60 % 24); //console.log(hour)

      if (String(hour).length == 1) {
        hour = '0' + hour;
      }

      var minute = parseInt(time / 60 % 60);

      if (String(minute).length == 1) {
        minute = '0' + minute;
      }

      var seconds = parseInt(time % 60);

      if (String(seconds).length == 1) {
        seconds = '0' + seconds;
      } // console.log(hour, minute, seconds)


      let timer = []; //所有时间数组

      timer[0] = day;
      timer[1] = hour;
      timer[2] = minute;
      timer[3] = seconds; // console.log(timer)

      if (time > 0) {
        //判断如果时间过期则改变
        this.setData({
          overTime: timer,
          isOver: true
        });
      } else {
        clearInterval(countTime);
        this.setData({
          isOver: false
        });
      }
    },

    //砍价记录列表
    kanList: function () {
      app.globalData.request({
        // url: 'https://hotmall.shiliucrm.com/api/bargain/cut_detail',
        url: api.default.bargaincutdetail,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          uid: this.uid,
          bargain_id: this.id
        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            jiluList: res,
            cut_prices: res.cut_prices
          });
          console.log(this.cut_prices, this.chajia);
          console.log(this.jiluList.record);

          if (res.record.length == 0 && this.shopsList.cut_success == 0) {
            this.setData({
              isShow: 1
            });
          } else if (res.record.length != 0 && this.shopsList.cut_success == 0) {
            this.setData({
              isShow: 2
            });
          } else if (res.record.length != 0 && this.shopsList.cut_success == 1) {
            this.setData({
              isShow: 3
            });
          }
        }
      }), this.zongjia();
    },
    zhaoren: function () {
      wx.navigateTo({
        url: '../bargaincharge/bargaincharge?id=' + this.id
      });
    },
    //分享
    fenxiang: function () {
      this.setData({
        fxshow: true
      });
    },
    nofxshow: function () {
      this.setData({
        fxshow: false
      });
    },
    yesshowFun: function () {
      this.setData({
        yesshow: true,
        fxshow: false
      });
    },
    noyesshow: function () {
      this.setData({
        yesshow: false
      });
    },
    //保存图片
    baoctp: function () {
      var that = this,
          image = this.shopsList.album[0].img_thumb;
      console.log(this.shopsList.album[0].img_thumb);
      wx.downloadFile({
        url: image,

        success(e) {
          console.log(e);
          wx.saveImageToPhotosAlbum({
            filePath: e.tempFilePath,

            success(res) {
              console.log(res);
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 1000
              });
            },

            fail() {
              console.log('失败');
            }

          });
        }

      });
    },
    //预览图片
    lookPic: function (e) {
      console.log(e);
      console.log(e.currentTarget.dataset.index);
      var picList = [];

      for (let i = 0; i < this.shopsList.album.length; i++) {
        picList.push(this.shopsList.album[i].img_thumb);
      }

      console.log(picList);
      wx.previewImage({
        current: picList[e.currentTarget.dataset.index],
        // 当前显示图片的http链接
        urls: picList // 需要预览的图片http链接列表

      });
    },
    //结算
    chenggong: function () {
      wx.navigateTo({
        url: '../../packageA/affirm/affirm?cart_id=' + this.shopsList.goods.id + '&iskan=' + 1 + '&img=' + this.shopsList.album[0].img_thumb + '&name=' + this.shopsList.goods.name + '&jiage=' + this.jiluList.surplus_price + '&type=' + 5
      });
    }
  }
};
</script>
<style>
@import "./bargaindetails.css";
</style>